<template>
  <el-form ref="form" :model="form" label-width="100px" style="margin-top: 15px">
    <el-form-item label="玩法详情:" prop="goodsGroupPlayDetails" class="label__label__font">
      <div class="content_text" style="width: 1000px; height: 600px; overflow-y: auto;">
        <quill-editor v-model="form.goodsGroupPlayDetails" :options="editorOption"></quill-editor>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm()">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { getgoodsGroupPlay, updateGoodsGroupPlay } from '@/api/marketing/group'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: "play",
  components: {
    quillEditor
  },
  data() {
    return {
      //富文本配置
      editorOption: {
        theme: 'snow', // 或者 'bubble'
      },
      // 表单参数
      form: {
        goodsGroupPlayId: null,
        goodsGroupPlayDetails: null,
      },
      // 表单校验
      rules: {
        categoryId: [
          { required: true, message: "商品类型不能为空", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    this.handleUpdate();
  },
  methods: {
    handleUpdate() {
      const goodsGroupPlayId = 1;
      getgoodsGroupPlay(goodsGroupPlayId).then(response => {
        this.form = response.data;
      });
    },

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.goodsGroupPlayId != null) {
            updateGoodsGroupPlay(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.handleUpdate();
            });
          } else {
            updateGoodsGroupPlay(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.handleUpdate();
            });
          }
        }
      });
    },
  }
};
</script>

<style>
.el-upload--text{
  height: 110px;
}
.upload-tip {
  color: #999; /* 灰色文字 */
  font-size: 14px; /* 字体大小 */
  text-align: left; /* 文本居中 */
}
.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 85px;
  height: 85px;
  margin: 0 8px 8px 0;
  display: inline-block;
}

/* 或者只为特定 el-form-item 设置宽度 */
.custom-width-form-item {
  width: 500px;
}

/* 也可以直接为 el-input 设置宽度 */
.custom-width-input {
  width: 100%; /* 或者具体像素值 */
}

.quill-editor {
  height: 500px;
}
.el-textarea__inner {
  margin-top: 0px;
  margin-bottom: 0px;
  height: 100px;
  width: 400px;
}
</style>
